<template>
    <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig"
        :fileList='[
            {
                fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
                newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
                originalFilename:"20221123-mp-certified-banner.png",
                url:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
        @actionSuccess="(res,file)=>{
            uploadImageConfig.fileList.push({...res[uploadImageConfig.imageOptions?.responseDataName || 'data']});
            console.log(uploadImageConfig.fileList)
        }"
    ></QilinUploadImage>
    <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig1"
        :fileList='[
            {
                fileName: "/profile/upload/2025/02/18/Camera_share_cover_1723512257685_20250218171616A006.png",
                name: "Camera_share_cover_1723512257685.png",
                newFileName: "Camera_share_cover_1723512257685_20250218171616A006.png",
                originalFilename:"Camera_share_cover_1723512257685.png",
                status: "success",
                uid: 1739877678519,
                url: "/profile/upload/2025/02/18/Camera_share_cover_1723512257685_20250218171616A006.png"
            },
            // {
            //     fileName:"/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",
            //     newFileName:"20221123-mp-certified-banner_20240418100434A012.png",
            //     originalFilename:"20221123-mp-certified-banner.png",
            //     name:"20221123-mp-certified-banner.png",
            //     url:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            // }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
    ></QilinUploadImage>
    <QilinUploadImage v-model:uploadImageConfig="uploadImageConfig2"
        @success="(value)=>{
            console.log(value);
            getUploadFileData(value);
            console.log(uploadImageConfig2.fileList);
        }"
    ></QilinUploadImage>
</template>

<script setup>
import {reactive,ref} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const getUploadFileData = (fileList,fileName = "file")=>{
    console.log(fileList,"=====");
    fileList.forEach((item)=>{
        if(!item.fileName){ //过滤未上传的文件
            let formData = new FormData();
            formData.append(fileName,item.raw);
            fetch("http://36.134.22.190:8091/common/upload",{
                headers:{
                    Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJhYUNtWWE4bjRZWjVtY05nY1NiMXNwWTlKZjlsS0p2cCIsInVzZXJJZCI6MX0.QuwzqYSfnBLuAiF0IpxicRHomLqEVhnDC5wRCWFYOqk"
                },
                method:"post",
                body:formData
            }).then((response)=>{
                // console.log(response);
                return response.json();
            }).then((res)=>{
                // console.log(res);
                Object.keys(res.data).forEach((key)=>{
                    item[key] = res.data[key];
                });
            });
        }
    });
};

const uploadImageConfig=reactive({
    action:"http://36.134.22.190:8061/common/upload",
    headers:{
        Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJVVGZMUW5hTlFaTW43Q05IVlgxR1hyYkRhNlFjZUZxYyIsInVzZXJJZCI6MX0.I05ywI7hYtTQRcUQb2lhkERPJLHmgeiJ9NEQ_m8sxtA"
    },
    autoUpload:true,
    fileList:[],
    limit:3,
    imageOptions:{
        serverUrl:"url"
    }
});
const uploadImageConfig1=reactive({
    fileList:[],
    imageIp:"http://36.134.22.190:8061",
    imageOptions:{
        // serverUrl:"url"
    },
    limit:3,
    imageFit:"fill"
});
const uploadImageConfig2=reactive({
    fileList:[],
    imageIp:"http://36.134.22.190:8081",
    limit:2,
    showIconImage:true
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
